<template>
  <div class="main-box">
    <!-- 权限分类树形筛选 -->
    <TreeFilter
      ref="treeFilterRef"
      title="权限分类"
      label="FName"
      :request-api="getPermissionModules"
      @change="changeTreeFilter"
      @loaded="handleTreeLoaded"
    />

    <div class="table-box">
      <ProTable
        ref="proTable"
        :columns="columns"
        :request-api="getPermissionList"
        :row-key="'FId'"
        :pagination="false"
        :init-param="initParam"
      >
        <!-- 表头按钮 -->
        <template #tableHeader>
          <el-button v-auth="'permission:add'" type="primary" :icon="CirclePlus" @click="openDialog()">新增权限</el-button>
          <el-button v-auth="'permission:edit'" type="primary" :icon="FolderAdd" @click="openModuleDialog()">分类管理</el-button>
        </template>

        <!-- 模块分类列 -->
        <template #module="{ row }">
          <el-tag v-if="row.FModuleName">{{ row.FModuleName }}</el-tag>
          <el-tag type="info" v-else>未分类</el-tag>
        </template>

        <!-- 操作列 -->
        <template #operation="{ row }">
          <el-button v-auth="'permission:edit'" type="primary" link :icon="EditPen" @click="openDialog(row)">编辑</el-button>
          <!-- eslint-disable vue/html-closing-bracket-newline -->
          <el-button v-auth="'permission:delete'" type="danger" link :icon="Delete" @click="handleDelete(row.FId)"
            >删除</el-button
          >
          <!-- eslint-enable vue/html-closing-bracket-newline -->
        </template>
      </ProTable>
    </div>

    <!-- 权限编辑弹窗 (用 v-if 控制挂载) -->
    <PermissionDialog v-if="showPermissionDialog" ref="permissionDialogRef" @refresh="refreshTable" @close="closeDialog" />

    <!-- 分类管理弹窗 -->
    <ModuleDialog ref="moduleDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { CirclePlus, Delete, EditPen, FolderAdd } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { getPermissionList, deletePermission as deletePermissionApi, getPermissionModules } from "@/api/modules/permission";
import PermissionDialog from "./components/PermissionDialog.vue";
import ModuleDialog from "./components/ModuleDialog.vue";
import type { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";

// 表格和树形组件引用
const proTable = ref<ProTableInstance>();
const treeFilterRef = ref();
const permissionDialogRef = ref<InstanceType<typeof PermissionDialog>>();
const moduleDialogRef = ref<InstanceType<typeof ModuleDialog>>();

// 用于 v-if 控制
const showPermissionDialog = ref(false);

const initParam = reactive({
  FModuleId: ""
});

const columns: ColumnProps[] = [
  { prop: "FName", label: "权限名称", width: 180, search: { el: "input" } },
  { prop: "FCode", label: "权限编码", width: 180 },
  { prop: "FModuleName", label: "所属模块", width: 120 },
  { prop: "FDescription", label: "权限描述", minWidth: 200 },
  { prop: "operation", label: "操作", fixed: "right", width: 180 }
];

const currentModuleId = ref("");

// 树形数据加载完成
const handleTreeLoaded = () => {
  if (treeFilterRef.value) {
    currentModuleId.value = treeFilterRef.value.getSelectedValue() || "";
    initParam.FModuleId = currentModuleId.value;
    refreshTable();
  }
};

// 分类筛选变化
const changeTreeFilter = (moduleId: string) => {
  currentModuleId.value = moduleId;
  initParam.FModuleId = currentModuleId.value;
  refreshTable();
};

// 打开分类管理弹窗
const openModuleDialog = () => {
  moduleDialogRef.value?.open();
};

// 刷新表格
const refreshTable = () => {
  proTable.value?.getTableList();
};

// 打开新增/编辑弹窗
const openDialog = (row?: any) => {
  console.log(row);

  showPermissionDialog.value = true; // 挂载组件
  nextTick(() => {
    permissionDialogRef.value?.open(row);
  });
};

// 弹窗关闭时卸载组件
const closeDialog = () => {
  showPermissionDialog.value = false;
};

// 删除权限
const handleDelete = async (id: string) => {
  try {
    await ElMessageBox.confirm("确认删除该权限?", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    });
    await deletePermissionApi(id);
    ElMessage.success("删除成功");
    refreshTable();
  } catch {
    // 用户取消
  }
};
</script>

<style scoped>
.main-box {
  display: flex;
  height: 100%;
  .table-box {
    flex: 1;
    margin-left: 20px;
    overflow: hidden;
  }
}
</style>
